<script setup lang="ts">
import { ref } from 'vue'
import { LoginApi } from '../api/login';
import { useRouter } from "vue-router";
import { ElMessageBox } from 'element-plus';
  const username = ref("");
  const password = ref("");
    const router = useRouter()




// 注册表单数据
const registerForm = ref({
  username: '',
  password: '',
  confirmPassword: '',
  phone: ''
})

// 当前激活的表单（登录/注册）
const activeForm = ref('login')

// 登录方法
const handleLogin = async () => {
  try {
      const response = await LoginApi.login({
          mobile: username.value.trim(),
          password: password.value.trim()

      });
  
      localStorage.setItem("accessToken",response.data.data.accessToken)
      localStorage.setItem("userId",response.data.data.userId)
      console.log(response);
     
       ElMessageBox.alert('登录成功', '提示', {
    confirmButtonText: '确定',
    callback: action => {
       router.push("/");
    }
  });

    
      
      // 这里可以添加登录成功后的逻辑，比如存储 token、跳转到首页等
  } catch (error) {
    console.log(error)
      // 这里可以添加登录失败后的提示逻辑
  }

  // 模拟登录成功后的跳转
  setTimeout(() => {
    console.log('登录成功，跳转到首页');
  }, 1500);
};


// 注册方法
const handleRegister = () => {
  // TODO: 实现注册逻辑
  console.log('注册表单提交', registerForm.value)
}

// 切换表单
const switchForm = (form: 'login' | 'register') => {
  activeForm.value = form
}
</script>

<template>
  <div class="login-container">
    <div class="login-header">
      <h1 class="main-title">泉州文旅</h1>
      <p class="sub-title">探索古城韵味，感受海丝风情</p>
    </div>
    <div class="form-container">
      <!-- 表单切换按钮 -->
      <div class="form-tabs">
        <button
          :class="['tab-btn', { active: activeForm === 'login' }]"
          @click="switchForm('login')"
        >
          登录
        </button>
        <button
          :class="['tab-btn', { active: activeForm === 'register' }]"
          @click="switchForm('register')"
        >
          注册
        </button>
      </div>

      <!-- 登录表单 -->
      <form v-if="activeForm === 'login'" @submit.prevent="" class="form">
        <div class="form-group">
          <label for="login-username">用户名</label>
          <input
            id="login-username"
            v-model="username"
            type="text"
            placeholder="请输入用户名"
            required
          >
        </div>
        <div class="form-group">
          <label for="login-password">密码</label>
          <input
            id="login-password"
            v-model="password"
            type="password"
            placeholder="请输入密码"
            required
          >
        </div>
        <div class="form-footer">
          <label class="remember-me">
            <input type="checkbox">
            <span>记住我</span>
          </label>
          <a href="#" class="forgot-password">忘记密码？</a>
        </div>
        <button type="submit" class="submit-btn" @click="handleLogin">登录</button>
      </form>

      <!-- 注册表单 -->
      <form v-else @submit.prevent="handleRegister" class="form">
        <div class="form-group">
          <label for="register-username">用户名</label>
          <input
            id="register-username"
            v-model="registerForm.username"
            type="text"
            placeholder="请输入用户名"
            required
          >
        </div>
        <div class="form-group">
          <label for="register-password">密码</label>
          <input
            id="register-password"
            v-model="registerForm.password"
            type="password"
            placeholder="请输入密码"
            required
          >
        </div>
        <div class="form-group">
          <label for="register-confirm-password">确认密码</label>
          <input
            id="register-confirm-password"
            v-model="registerForm.confirmPassword"
            type="password"
            placeholder="请再次输入密码"
            required
          >
        </div>
        <div class="form-group">
          <label for="register-phone">手机号</label>
          <input
            id="register-phone"
            v-model="registerForm.phone"
            type="tel"
            placeholder="请输入手机号"
            required
          >
        </div>
        <button type="submit" class="submit-btn">注册</button>
      </form>
    </div>
  </div>
</template>

<style scoped>
.login-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: url('https://th.bing.com/th/id/OIP.BQ8vue-RVq8bzrJARkGKbAHaE8?w=289&h=180&c=7&r=0&o=7&cb=iwp2&dpr=1.5&pid=1.7&rm=3') no-repeat center center; /* 泉州背景图 */
  background-size: cover;
  padding: 20px;
  position: relative;
  overflow: hidden;
  font-family: 'KaiTi', serif; /* 统一字体 */
}

.login-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4); /* 蒙版颜色调整 */
  z-index: 1;
}

.login-header {
  z-index: 2;
  color: white;
  text-align: center;
  margin-bottom: 40px; /* 间距调整 */
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); /* 阴影调整 */
}

.main-title {
  font-family: 'KaiTi', serif; /* 统一字体 */
  font-size: 4.5em; /* 标题大小调整 */
  margin-bottom: 10px;
  font-weight: bold;
  letter-spacing: 5px; /* 字间距调整 */
  animation: fadeInDown 1s ease-out; /* 动画时间调整 */
}

.sub-title {
  font-size: 1.8em; /* 副标题大小调整 */
  opacity: 0.9;
  animation: fadeInUp 1s ease-out 0.3s; /* 动画时间调整 */
}

@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-50px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(50px); }
  to { opacity: 1; transform: translateY(0); }
}

.form-container {
  z-index: 2;
  background: rgba(255, 255, 255, 0.9); /* 背景透明度调整 */
  padding: 40px; /* 内边距调整 */
  border-radius: 15px; /* 圆角调整 */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); /* 阴影调整 */
  width: 100%;
  max-width: 450px; /* 宽度调整 */
  backdrop-filter: blur(5px); /* 毛玻璃效果调整 */
  animation: zoomIn 0.8s ease-out; /* 动画时间调整 */
}

@keyframes zoomIn {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}

.form-tabs {
  display: flex;
  margin-bottom: 30px; /* 间距调整 */
  border-bottom: 1px solid #d3cbbd; /* 统一边框颜色 */
  position: relative;
}

.form-tabs::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px; /* 分隔线高度调整 */
  background: linear-gradient(to right, #f0f0f0, #e0e0e0); /* 渐变分隔线调整 */
}

.tab-btn {
  flex: 1;
  padding: 15px 0; /* 内边距调整 */
  border: none;
  background: none;
  color: #8b5e3c; /* 统一颜色 */
  font-size: 18px; /* 字体大小调整 */
  font-weight: 600;
  cursor: pointer;
  transition: all 0.4s ease; /* 过渡时间调整 */
  position: relative;
  overflow: hidden;
}

.tab-btn::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 3px; /* 激活下划线高度调整 */
  background: #8b5e3c; /* 统一激活下划线颜色 */
  transition: width 0.4s ease; /* 过渡时间调整 */
}

.tab-btn.active {
  color: #6a4a3a; /* 统一激活颜色 */
}

.tab-btn.active::after {
  width: 100%;
}

.tab-btn:hover {
  color: #6a4a3a; /* 统一悬停颜色 */
}

.form {
  display: flex;
  flex-direction: column;
  gap: 25px; /* 间距调整 */
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 10px; /* 间距调整 */
}

label {
  color: #6a4a3a; /* 统一标签颜色 */
  font-size: 15px;
  font-weight: 500;
}

input {
  padding: 12px 15px; /* 内边距调整 */
  border: 1px solid #d3cbbd; /* 统一边框颜色 */
  border-radius: 8px; /* 圆角调整 */
  font-size: 16px;
  transition: all 0.3s ease;
  background-color: #fefefe; /* 背景颜色调整 */
}

input:focus {
  border-color: #8b5e3c; /* 统一焦点颜色 */
  outline: none;
  box-shadow: 0 0 0 3px rgba(139, 94, 60, 0.2); /* 统一焦点阴影 */
  background-color: white;
}

.form-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 15px;
  margin-top: -10px; /* 位置调整 */
}

.remember-me {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #6a4a3a; /* 统一颜色 */
}

.forgot-password {
  color: #8b5e3c; /* 统一链接颜色 */
  text-decoration: none;
  transition: color 0.3s ease;
}

.forgot-password:hover {
  color: #6a4a3a; /* 统一悬停颜色 */
}

.submit-btn {
  background: linear-gradient(to right, #8b5e3c, #6a4a3a); /* 统一渐变背景 */
  color: white;
  border: none;
  padding: 15px; /* 内边距调整 */
  border-radius: 8px; /* 圆角调整 */
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.4s ease;
  box-shadow: 0 5px 15px rgba(139, 94, 60, 0.3); /* 统一阴影 */
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.submit-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.2); /* 闪光效果调整 */
  transform: skewX(-30deg);
  transition: all 0.7s ease;
  z-index: -1;
}

.submit-btn:hover {
  transform: translateY(-3px); /* 悬停上浮调整 */
  box-shadow: 0 8px 20px rgba(139, 94, 60, 0.5); /* 悬停阴影调整 */
}

.submit-btn:hover::before {
  left: 100%;
}

@media (max-width: 600px) { /* 调整响应式断点 */
  .login-header {
    margin-bottom: 30px;
  }
  .main-title {
    font-size: 3.5em;
    letter-spacing: 3px;
  }
  .sub-title {
    font-size: 1.4em;
  }
  .form-container {
    padding: 30px;
    max-width: 90%;
  }
  .tab-btn {
    font-size: 16px;
    padding: 12px 0;
  }
  .form {
    gap: 20px;
  }
  .form-group {
    gap: 8px;
  }
  label {
    font-size: 14px;
  }
  input {
    padding: 10px 12px;
    font-size: 15px;
  }
  .form-footer {
    font-size: 14px;
    margin-top: -8px;
  }
  .submit-btn {
    font-size: 16px;
    padding: 12px;
  }
}

@media (max-width: 400px) { /* 更小的移动端调整 */
  .login-header {
    margin-bottom: 20px;
  }
  .main-title {
    font-size: 3em;
    letter-spacing: 2px;
  }
  .sub-title {
    font-size: 1.2em;
  }
  .form-container {
    padding: 25px;
  }
  .tab-btn {
    font-size: 14px;
    padding: 10px 0;
  }
  .form {
    gap: 15px;
  }
  .form-group {
    gap: 6px;
  }
  label {
    font-size: 13px;
  }
  input {
    padding: 8px 10px;
    font-size: 14px;
  }
  .form-footer {
    font-size: 13px;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .submit-btn {
    font-size: 14px;
    padding: 10px;
  }
}
</style>